<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/10/14
  Time: 17:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>后台管理 - 易买网</title>
    <link type="text/css" rel="stylesheet" href="../css/style.css" />
    <script type="text/javascript" src="../scripts/function-manage.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <!-- 引入 wangEditor.min.js -->
    <script src="https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js"></script>
</head>
<body>
<div id="header" class="wrap">
    <div id="logo"><img src="../images/logo.gif" /></div>
    <div class="help"><a href="../../index.jsp">返回前台页面</a></div>
    <div class="navbar">
        <ul class="clearfix">
            <li><a href="index.html">首页</a></li>
            <li><a href="user.html">用户</a></li>
            <li><a href="product.html">商品</a></li>
            <li><a href="order.html">订单</a></li>
            <li><a href="guestbook.jsp">留言</a></li
            <li class="current"><a href="news.html">新闻</a></li>
        </ul>
    </div>
</div>
<div id="childNav">
    <div class="welcome wrap">
        管理员pillys您好，今天是2012-12-21，欢迎回到管理后台。
    </div>
</div>
<div id="position" class="wrap">
    您现在的位置：<a href="index.jsp">易买网</a> &gt; 管理后台
</div>
<div id="main" class="wrap">
    <div id="menu-mng" class="lefter">
        <div class="box">
            <dl>
                <dt>用户管理</dt>
                <dd><em><a href="user-add.jsp">新增</a></em><a href="user.jsp">用户管理</a></dd>
                <dt>商品信息</dt>
                <dd><em><a href="productClass-add.html">新增</a></em><a href="productClass.html">分类管理</a></dd>
                <dd><em><a href="product-add.html">新增</a></em><a href="product.html">商品管理</a></dd>
                <dt>订单管理</dt>
                <dd><a href="order.html">订单管理</a></dd>
                <dt>留言管理</dt>
                <dd><a href="guestbook.jsp">留言管理</a></dd>
                <dt>新闻管理</dt>
                <dd><em><a href="news-add.jsp">新增</a></em><a href="news.jsp">新闻管理</a></dd>
            </dl>
        </div>
    </div>
    <div class="main">
        <h2>添加新闻</h2>
        <div class="manage">
            <form action="manageNewsServlet" method="post">
                <input type="hidden" class="text" name="op" id="op" value="insert" />

                <table class="form">
                    <tr>
                        <td class="field">新闻标题：</td>
                        <td><input type="text" class="text" name="newstittle" id="newstittle" value="" /></td>
                    </tr>
                    <tr>
                        <td class="field">新闻类别：</td>
                        <td>
                            <select id="newstype" name="type">
                                <option value="0">公告</option>
                                <option value="1">新闻</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td class="field">新闻内容：</td>
                        <td>
                            <div id="div1">
                                <p>新闻内容</p>
                            </div>
                            <textarea name="context" id="text1" style="width:100%; height:200px;display: none"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td><label class="ui-blue"><input type="submit" name="submit" value="提交" /></label></td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
    <div class="clear"></div>
</div>
<div id="footer">
    Copyright &copy; 2010 北大青鸟 All Rights Reserved. 京ICP证1000001号
</div>
<script type="text/javascript">
  /*  const E = window.wangEditor
    const editor = new E('#div1')
    const $text1 = $('#text1')
    editor.config.onchange = function (html) {
        // 第二步，监控变化，同步更新到 textarea
        $text1.val(html)
    }
    editor.create()

    // 第一步，初始化 textarea 的值
    $text1.val(editor.txt.html());*/

  <script>
  $(function () {
      $("#productname").val($('#commodity_name').text());
      $('#price').val($(".realprice").text());
      $("#gobuy").on('click', function () {
          $.ajax({
              url: "/shopping/html/BuyServlet",
              type: "post",
              data: {
                  productname: $("#productname").val(),
                  userid:${sessionScope.user.userid},
                  price: $("#price").val(),
                  productid: $('#productid').val()
              },
              success: function (data) {
                  $(location).attr('href', '/shopping/html/buy-result.jsp');
              }
          })
      })

      $("#submit").on('click', function () {
          $.ajax({
              url: "/shopping/html/PutInCarServlet",
              type: "post",
              data: {
                  productname: $("#productname").val(),
                  userid:${sessionScope.user.userid},
                  price: $("#price").val(),
                  productid: $('#productid').val()
              },
              success: function (data) {
                  alert("添加到购物车成功")
              }
          })
      })
  })
</script>
<script>
    // ①整个案例可以分为三个功能模块
    // ②鼠标经过小图片盒子,黄色的遮挡层和大图片盒子显示,离开-->隐藏2个盒子功能
    // ③黄色的遮挡层 跟随 鼠标功能。
    // ④移动黄色遮挡层,大图片跟随移动功能。
    // 事件源：
    var box1 = document.querySelector('.box1');
    var bg = document.querySelector('.box1_bg');
    var big = document.querySelector('.big_img');
    // 1. 鼠标 经过 盒子的时候，显示 遮罩层 和 放大镜
    box1.addEventListener('mouseover',function(){
        bg.style.display = 'block';
        big.style.display = 'block';
    })
    // 2. 鼠标 离开 盒子的时候，隐藏 遮罩层 和 放大镜
    box1.addEventListener('mouseout',function(){
        bg.style.display = 'none';
        big.style.display = 'none';
    })

    // 2.鼠标移动的时候
    box1.addEventListener('mousemove',function(e){
        var x = e.pageX - this.offsetLeft; // x是鼠标到父盒子x距离
        var y = e.pageY - this.offsetTop; // y是鼠标到父盒子y距离
        // console.log(x ,y)
        // 最大移动距离，box1盒子的大小 减去 遮罩层的盒子大小
        var max_x = box1.offsetWidth - bg.offsetWidth;
        var max_y = box1.offsetHeight - bg.offsetHeight;
        if( max_x >=0 )
            // *将坐标减去 遮罩层盒子的一半 鼠标就落到遮罩层的中间
            // 移动距离X,Y
            var X = x - bg.offsetWidth/2;
        var Y = y - bg.offsetHeight/2;
        // *当遮罩层超出 box1 的边框的时候，设一个边界卡住它
        if(X <= 0 ){
            X = 0
        }else if( X >= max_x){
            X = max_x;
        }
        if(Y <= 0 ){
            Y=0
        }else if( Y >= max_y){
            Y = max_y;
        }
        // *把鼠标在盒子内的坐标给 遮罩层 实现跟随鼠标移动效果
        // 注意加上 px 不然不起效果
        bg.style.left = X +'px';
        bg.style.top = Y +'px';

        // 右边图片跟随移动，有一个小算法：big_img_x
        // 遮挡层移动距离（X）/遮挡层最大移动距离（max_x）=大图片移动距离（bigX)/大图片移动的最大距离（big_img_x)

        // 获取 图片 事件源
        var big_img = document.querySelector('.big_imgs');
        // big_img_x 求大图片移动的最大距离 正方形 距离一样的
        var big_img_x = big_img.offsetWidth - big.offsetWidth ;
        var big_img_y = big_img.offsetWidth - big.offsetWidth ;
        // bigX 大图片的移动距离
        var bigX = X * big_img_x / max_x ;
        var bigY = Y * big_img_y / max_x ;
        big_img.style.left = -bigX +'px';
        big_img.style.top = -bigY +'px';
    })
</script>
<script>
    var myvideo = document.getElementById("myvideo");
    var type_video = 1;
    myvideo.pause();
    function video() {
        if(type_video == 1){
            console.log("video");
            $(".img1").css("display","none");
            $(".big_img").css("display","none");
            $(".box1_bg").css("display","none");
            $("#v_m").show();
            $("#box2_bg").show();
            myvideo.play();
            type_video = 2;
        }else{
            console.log("remove");
            $(".img1").show();
            $(".big_img").show();
            $(".box1_bg").show();
            $("#v_m").css("display","none");
            $("#box2_bg").css("display","none");
            myvideo.pause();
            type_video = 1;
        }

    }

    function remove() {
        console.log("remove");
        $(".img1").show();
        $(".big_img").show();
        $(".box1_bg").show();
        $("#v_m").css("display","none");
        // $("#box2_bg").css("display","none");
        myvideo.pause();
    }
</script>
</body>
</html>

